<template>
  <div class="radar-conatiner">
    <a-card class="card">
      <div
        id="radarChart"
        ref="radarChart"
        :style="{ width: '100%', height: '100%' }"
      ></div>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
import * as echarts from "echarts";
import { EChartsOption, EChartsType } from "echarts";
import { onMounted, ref, onUnmounted } from "vue";

const radarChart = ref(null);
const props = defineProps({
  width: {
    type: String,
    default: "100%",
  },
  height: {
    type: String,
    default: "100%",
  },
});
// 线性表的配置项
const option = ref<EChartsOption>({
  legend: {
    data: ["数据1", "数据2"],
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: "道路结冰", max: 100 },
      { name: "洪水", max: 100 },
      { name: "台风", max: 100 },
      { name: "霜冻", max: 100 },
      { name: "沙尘暴", max: 100 },
      { name: "雷电", max: 100 },
      { name: "寒潮", max: 100 },
      { name: "干旱", max: 100 },
      { name: "高温", max: 100 },
      { name: "大雾", max: 100 },
      { name: "大风", max: 100 },
      { name: "冰雹", max: 100 },
      { name: "暴雨", max: 100 },
      { name: "暴雪", max: 100 },
    ],
  },
  color: ["rgba(245, 166, 35, 1)", "rgba(19, 173, 255, 1)"],
  series: [
    {
      name: "数据1",
      type: "radar",
      symbol: "circle",
      symbolSize: 10,
      areaStyle: {
        color: "rgba(245, 166, 35, 0.4)",
      },
      itemStyle: {
        color: "rgba(245, 166, 35, 1)",
        borderColor: "rgba(245, 166, 35, 0.3)",
        borderWidth: 10,
      },
      lineStyle: {
        type: "dashed",
        color: "rgba(245, 166, 35, 1)",
        width: 2,
      },
      data: [[80, 50, 55, 80, 50, 80, 48, 43, 60, 78, 60, 40, 51, 44, 65]],
    },
    {
      name: "数据2",
      type: "radar",
      symbol: "circle",
      symbolSize: 10,
      itemStyle: {
        color: "rgba(19, 173, 255, 1)",
        borderColor: "rgba(19, 173, 255, 0.4)",
        borderWidth: 10,
      },
      areaStyle: {
        color: "rgba(19, 173, 255, 0.5)",
      },
      lineStyle: {
        color: "rgba(19, 173, 255, 1)",
        width: 2,
        type: "dashed",
      },
      data: [[60, 60, 65, 60, 70, 40, 80, 63, 68, 60, 77, 60, 80, 62, 80]],
    },
  ],
});

const initChart = () => {
  const myChart: EChartsType = echarts.init(radarChart.value!);
  myChart.setOption(option.value);
  window.addEventListener("resize", () => myChart.resize());
};

onMounted(() => {
  initChart();
});
onUnmounted(() => {
  window.addEventListener("resize", null);
});
</script>
<style lang="less" rel="stylesheet/less" scoped>
.radar-conatiner {
  margin: 10px;
  height: calc(100% - 60px);

  .card {
    height: 100%;
    overflow: scroll;
    box-shadow: 0px 0px 4px rgb(0 0 0 / 12%);
    border-radius: 4px;
    :deep(.ant-card-body) {
      height: 100%;
    }
  }
}
</style>
